<template>
    <div>
        <van-cell-group>
            <div style="position: relative;" >
                <van-cell title="头像" :to="{path: '/mine/edit/avatar', query: {avatar: iconPath }}">
                    <div slot="right-icon">
                        <div class="avatar">
                            <img :src="iconPath || defaultImg" />
                        </div>
                    </div>
                </van-cell>
            </div>
            <van-cell title="姓名" :value="realName || '未填写'" is-link :to="{path: '/mine/edit/realName', query: {realName: realName }}"></van-cell>
            <van-cell title="性别" :value="sex | sex" is-link :to="{ path: '/mine/edit/sex', query: { sex: sex }}"></van-cell>
            <van-cell title="地区" :value="address || '未填写'" is-link :to="{path: `/mine/edit/address`, query: {provinceId: provinceId, cityId: cityId, districtId: districtId, address: address}}"></van-cell>
            <van-cell title="生日" :value="birthday || '未填写'" is-link :to="{path: `/mine/edit/birthday`, query: {birthday: birthday}}"></van-cell>
            <van-cell title="微信号" :value="weixin || '未填写'" is-link :to="{path: `/mine/edit/weixin`, query: {weixin: weixin}}"></van-cell>
        </van-cell-group>
    </div>
</template>

<script>
import defaultImg from './../../assets/avata.png';
export default {
    name: 'editInfo',
    data() {
        return {
            defaultImg,

            iconPath: '', //头像
            realName: '', //真实姓名
            sex: '', //性别
            sexText: '',
            birthday: '', //生日
            birthdayText: '',
            provinceId: '', //省份id
            provinceName: '',
            cityId: '', //城市id
            cityName: '',
            districtId: '', //地区id
            districtName: '',
            address: '',
            weixin: '', //微信
        }
    },

    methods: {
        getDetail() {
            this.$http.post('/user/user/front/getUser', {

            }).then(res => {
                if (res.status === 0) {
                    let template =  {
                        iconPath: this.iconPath, //头像
                        realName: this.realName, //真实姓名
                        sex: this.sex, //性别
                        birthday: this.birthday, //生日
                        provinceId: this.provinceId, //省份id
                        provinceName: this.provinceName,
                        cityId: this.cityId, //城市id
                        cityName: this.cityName,
                        districtId: this.districtId, //地区id
                        districtName: this.districtName,
                        weixin: this.weixin, //微信
                    };

                    for (let i in template) {
                        this[i] = res.data[i];
                    }

                    this.address = `${res.data.provinceName || ''}${res.data.cityName || ''}${res.data.districtName || ''}`
                } else {
                    this.$toast.fail(res.message);
                }
            })
        },
    },

    created() {
        this.getDetail();
    }
}
</script>

<style lang="scss">
.avatar {
    height: 40px;
    width: 40px;
    border-radius: 50%;
    img {
        height: 40px;
        width: 40px;
        border-radius: 50%;
    }
}
</style>
